<template>
  <div>
    <div @click="applynewadd()">
      <slot><el-button type="primary">添加角色</el-button></slot>
    </div>
    <MyDialog
      :title="editId ? '编辑角色' : '添加角色'"
      :visible.sync="addSwitch"
      size="large"
      @beforeClose="close_add"
    >
      <el-form
        ref="khadd"
        :model="queryParam"
        :rules="ywkrules"
        label-width="110px"
        class="demo-ruleForm"
      >
        <div style="padding: 23px 0px 0 0px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="角色名:" prop="name">
                <el-input
                  v-model="queryParam.name"
                  maxlength="10"
                  style="width: 100%"
                  show-word-limit
                  clearable
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="权限:" prop="auth_id">
                <el-select
                  v-model="queryParam.auth_id"
                  style="width: 100%"
                  placeholder="请选择"
                  multiple
                  filterable
                >
                  <el-option
                    v-for="item in permission_list"
                    :key="item.id"
                    :value="item.id + 0"
                    :label="item.auth_name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="描述:" prop="role_desc">
                <el-input
                  v-model="queryParam.role_desc"
                  style="width: 100%"
                  show-word-limit
                  clearable
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <template slot="footer">
        <el-button type="primary" @click="submit_apply">保 存</el-button>
        <el-button @click="close_add">取 消</el-button>
      </template>
    </MyDialog>
  </div>
</template>
<script>
  import MyDialog from '@/components/Dialog'
  import { addRole, roleDetail, editRole, permissionList } from '@/api/admin.js'
  export default {
    components: {
      MyDialog,
    },
    data() {
      return {
        queryParam: {
          auth_id: '',
          name: '',
          role_desc: '',
        },
        permission_list: [],
        addSwitch: false,
        loading: false,
        uploadList: false,
        ywkrules: {
          role_desc: [
            { required: true, message: '请填写描述', trigger: 'blur' },
          ],
          auth_id: [
            { required: true, message: '请选择权限', trigger: 'change' },
          ],
          name: [{ required: true, message: '请填写名称', trigger: 'blur' }],
        },
        editId: '',
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getAllPermission()
    },
    methods: {
      async getAllPermission() {
        let data = await permissionList()
        if (data.code == 1) {
          this.permission_list = data.data.list
        }
      },
      applynewadd(item) {
        this.addSwitch = true
        this.uploadList = false
        this.editId = ''
        if (item) {
          // 编辑
          this.editId = item.id
          let queryParam = {
            auth_id: item.auth_list.map((item) => item.auth_id),
            name: item.name,
            role_desc: item.role_desc,
          }
          this.$nextTick(() => {
            Object.assign(this.queryParam, queryParam)
          })
          // this.getDetail(id)
        }
      },
      async getDetail(id) {
        let params = { id }
        let data = await roleDetail(params)
        if (data.code == 1) {
          let { auth_id, name, role_desc } = data.data
          let queryParam = {
            auth_id: auth_id,
            name,
            role_desc,
          }
          Object.assign(this.queryParam, queryParam)
        }
      },
      submit_apply() {
        this.$refs['khadd'].validate(async (valid) => {
          if (valid) {
            this.$confirm('是否继续此操作?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            })
              .then(async () => {
                this.loading = true
                let params = { ...this.queryParam }
                params.auth_id = params.auth_id.join(',')
                let data
                if (this.editId) {
                  params.id = this.editId
                  data = await editRole(params)
                } else {
                  data = await addRole(params)
                }
                if (data.code == 1) {
                  this.$baseMessage('操作成功', 'success')
                  this.uploadList = true
                  setTimeout(() => {
                    this.close_add()
                  }, 500)
                }
                this.loading = false
              })
              .catch(() => {})
          } else {
            return false
          }
        })
      },
      close_add() {
        this.$refs['khadd'].resetFields()
        this.$nextTick(() => {
          this.$emit('close', this.uploadList)
          this.addSwitch = false
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  .upload-box {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #c0ccda;
    cursor: pointer;
  }
  .live-style-item {
    float: right;
    color: #8492a6;
    font-size: 13px;
    max-width: 200px;
  }

  .bind-box {
    padding: 0 0 20px;
  }

  .bind-box-table {
    padding: 0 0 20px;
  }

  .footer {
    text-align: center;
    padding: 10px 0 45px;

    & > :nth-child(n + 2) {
      margin-left: 14px;
    }

    button {
      width: 106px;
      height: 48px;
    }
  }
</style>
